<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 1000px;
			background-color: pink;
			height: 200px;

		}
		.content div{
			width: 200px;
			height: 200px;
			
		}
		.content div:nth-of-type(1){
			background-color: red;
			float: left;
		}
		.content div:nth-of-type(2){
			background-color: blue;
			float: right;
		}
		.content div:nth-of-type(3){
			background-color: black;
			float: left;
		}
		.content span{
			width: 200px;
			height: 200px;
			background-color: orange;
			float: left;
		}

		.one{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
		}
		.two{
			width: 400px;
			height: 200px;
			background-color: blue;
		}
		.a{
			height: 200px;
		}

	</style>
</head>
<body>
	<!-- 使用了浮动 -->
	<!-- <div class="a">
	<div class="one"></div>
	</div>
 -->

	<!-- 普通div   标准文档流 -->
	<!-- <div class="two"></div> -->

	<!-- display:inline-bloak -->
	<!-- 有缝隙 -->

	<!-- 浮动是一种布局方式   通过属性  float  实现 -->
	<!-- float:left -->



	<div class="content">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<span>4</span>

		<!-- 注意：如果同级中有元素  使用了浮动  那么他的兄弟也应该设置浮动 -->



	</div>



	<!-- 1.浮动的元素不能有效的撑开父级的高度
	解决：给父级设置高度
			解决浮动带来的问题（伪元素清除法） -->


	<!-- 2.浮动会导致 托脱离标准文档流  不管是什么标签  如果使用了浮动 就会脱离原来的规则 也就是原来不能设置的也能设置了  （脱离标准文档流的元素  有点像行内块  但又不是）
	简称：脱标 -->


	3.解决浮动带来的问题（伪元素清除法）





</body>
</html>